<template>
  <div class="module-wrap flex-1 border-t border-[#ffffff1a]">
    <div class="title-wrap title-wrap_1 config">
      <span class="title">近期国内地震信息</span>
      <div class="option"></div>
    </div>
    <ul class="earthquake_info">
      <li
        v-for="(item, idx) in list"
        :key="idx"
        class="list_msg border-t border-[#ffffff1a]"
      >
        <Row>
          <Col :span="3">
            <div class="ranking text-[1.3vh]">
              {{ idx + 1 }}
            </div>
          </Col>
          <Col :span="8">
            <span class="text-[1.3vh]">{{ item.locname }}</span>
          </Col>
          <Col :span="10">
            <span class="text-[1.3vh]">{{ item.oritime }}</span>
          </Col>
          <Col :span="3">
            <div
              class="text-[1.3vh]"
              :class="{
                'text-white': item.magnitude < 3,
                'text-yellow-300': item.magnitude >= 3 && item.magnitude < 5,
                'text-orange-300': item.magnitude >= 5 && item.magnitude < 7,
                'text-red-500': item.magnitude >= 7,
              }"
            >
              {{ item.magnitude }}级
            </div>
          </Col>
        </Row>
      </li>
    </ul>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import { Col, Row } from 'ant-design-vue';
import { recentEarthquakeInfo } from '../api';

const list = ref([]);

recentEarthquakeInfo().then((res) => {
  list.value = res.data;
});
</script>
